<template>
  <NuxtLayout>
    <div class="mx-auto mt-[120px] md:max-w-5xl">
      <!-- 文章详情 -->
      <section>
        <el-breadcrumb separator="/" class="custorm-breadcrumb text-white">
          <el-breadcrumb-item :to="{ path: '/news' }">
            <span class="text-white">news</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span class="text-gray-500">{{ formModel.title }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </section>

      <section class="my-4 text-white">
        <!-- 标题 -->
        <h1 class="mb-2 mt-6 text-center text-4xl">{{ formModel.title }}</h1>
        <div class="mt-4 text-center text-xs" v-if="publishTime">发布日期: {{ publishTime }}</div>
        <!-- 标签 -->
        <div class="my-4 flex justify-center gap-2" style="color: rgb(120, 87, 255)">
          <div class="px-1 py-1 text-sm" v-for="(item, index) in formModel.tags" :key="index">
            {{ item.name }}
          </div>
        </div>

        <!-- 显示封面 -->
        <div v-if="formModel.cover" class="mb-4 flex max-h-[800px] justify-center overflow-hidden">
          <img draggable="false" class="h-auto w-full object-cover" :src="formModel.cover" alt="" />
        </div>

        <!-- 富文本内容，设置这的字体大小为 16px -->
        <div class="article-content border-b border-b-gray-700 pb-4 text-base" v-html="formModel.content"></div>

        <!-- 返回上一页 -->
        <div class="flex justify-end py-4">
          <nuxt-link to="/news" class="back-btn flex items-center gap-2 text-gray-300 transition hover:text-white">
            <arrowLeftSvg></arrowLeftSvg>
            <div>返回列表</div>
          </nuxt-link>
        </div>
      </section>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import arrowLeftSvg from '~/assets/images/svg/arrow-left-svg.vue'

const route = useRoute()

let id = route.params.id

let articleRes = await useFetch('/api/articles/' + id, {
  method: 'GET'
})

let item

if (articleRes.data.value) {
  let data = articleRes.data.value.data

  item = data
}

let formModel = ref(item)

const publishTime = computed(() => {
  return formModel.value.createTime ? formModel.value.createTime.split(' ')[0] : ''
})
</script>

<style lang="scss">
.article-content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  section {
    all: revert;
  }
}
</style>

<style lang="scss" scoped>
:deep(.custorm-breadcrumb) {
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
}
.back-btn {
  svg {
    transition: all 0.2s ease;
  }
}

.back-btn:hover {
  svg {
    transform: translateX(-4px);
  }
}
</style>
